<template>
  <div class="actives">
    <!-- <h2 style="padding: 10px">我的活动</h2>
    <hr>
    <ul class="myActives">
      <li class="myActive" v-for="i in list" :key="i.id">
        <div class="cover-img">
          <img :src="i.image" alt="活动">
        </div>
        <div class="ACInfo">
          <div class="title">{{i.title}}#{{i.id}}</div>
          <div class="time">{{formatTime(i.beginTime)}}到{{formatTime(i.endTime)}}</div>
          <div v-if="i.isEnd">已结束</div>
          <div v-else style="color:#ff3700;font-weight:800;">进行中</div>
        </div>
        <div class="optiopns"></div>
      </li>
    </ul> -->
    <el-button type="primary" id="refresh-data-btn" @click="refresh">刷新</el-button>
    <el-tabs type="border-card">
      
      <el-tab-pane label="我参与的" id="my-activity">
        <my-active-data :tableData="tableData" :filters="filters"></my-active-data>
      </el-tab-pane>

      <el-tab-pane label="我创建的" id="real-my-activity">
          <my-publish :tableData="tableData" :filters="filters"></my-publish>
      </el-tab-pane>

      <el-tab-pane label="数据统计" id="statistics" @refreshChild="refreshChild">
        <statistics :tableData="tableData"></statistics>
      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<script>
import MyActiveData from '@/components/activesCard/MyActiveData'
import Statistics from '@/components/activesCard/Statistics'
import token from '@/apis/refresh_token'
import active from '@/apis/active_operations'
import MyPublish from '@/components/activesCard/MyPublish'

export default {
  name: "MyActives",
  data() {
    return {
      list:[
        // {id:1,title:'餐厅特惠',tag:'聚餐',picknum:233, imgsrc:'https://ds.js.design/assets/img/5faa892e3a88ccaf0e27ea97.png',isPicked:false, contact:'18788937085', introduce:'来吃饭吧', maxNum:10, nowNum: 5, isEnd:false},
        // {id:2,title:'写代码',tag:'聚会',picknum:233, imgsrc:'https://img2.baidu.com/it/u=607470320,1665311922&fm=26&fmt=auto',isPicked:false, contact:'1617308593', introduce:'写代码！卷！冲啊！', maxNum:5, nowNum: 1, isEnd:false},
        // {id:3,title:'餐厅特惠',tag:'聚餐',picknum:233, imgsrc:'https://ds.js.design/assets/img/5faa892e3a88ccaf0e27ea97.png',isPicked:false, contact:'18788937085', introduce:'来吃饭吧', maxNum:10, nowNum: 5, isEnd:false},
        // {id:4,title:'写代码',tag:'聚会',picknum:233, imgsrc:'https://img2.baidu.com/it/u=607470320,1665311922&fm=26&fmt=auto',isPicked:false, contact:'1617308593', introduce:'写代码！卷！冲啊！', maxNum:5, nowNum: 1, isEnd:false},
      ],
      tableData: [
        // {aid:1, title:'餐', tag:'聚餐', pickNum:233, img:'https://ds.js.design/assets/img/5faa892e3a88ccaf0e27ea97.png', picked:false, contact:'18788937085', introduce:'来吃饭吧', maxNum:10, nowNum: 5, end:false, beginTime:'2022-04-27', endTime:'2022-04-28', location: '西南石油大学', creator: '沈俞佑'},
        // {aid:1, title:'餐厅特', tag:'聚餐', pickNum:233, img:'https://ds.js.design/assets/img/5faa892e3a88ccaf0e27ea97.png', picked:false, contact:'18788937085', introduce:'来吃饭吧', maxNum:10, nowNum: 5, end:false, beginTime:'2022-04-27', endTime:'2022-04-29', location: '西南石油大学', creator: '沈俞佑'},
        // {aid:1, title:'餐厅特惠', tag:'聚餐', pickNum:233, img:'https://ds.js.design/assets/img/5faa892e3a88ccaf0e27ea97.png', picked:false, contact:'18788937085', introduce:'来吃饭吧', maxNum:10, nowNum: 5, end:false, beginTime:'2022-04-27', endTime:'2022-04-30', location: '西南石油大学', creator: '沈俞佑'}
      ],
      filters: [
        {text: '聚餐', value:'聚餐'},
        {text: '学习', value:'学习'},
        {text: '出游', value:'出游'},
        {text: '其他', value:'其他'},
      ],
     
      
      search: '',
      nowPage: 1
    }
  },
  components: {
    'my-active-data': MyActiveData,
    'statistics': Statistics,
    'my-publish': MyPublish
  },
  methods: {
    refresh () {
      location.reload()
    },
    refreshChild (callback) {
      console.log('父组件收到',callback)
      if (callback) {
        callback ()
      }
    },
    formatTime(timeStamp) {
      let time = new Date(timeStamp),
          y = time.getFullYear(),
          m = time.getMonth()+1,
          d = time.getDate(),
          h = time.getHours(),
          mm = time.getMinutes(),
          s = time.getSeconds()
      return y+'-'+m+'-'+d+'-'+h
    },
    resetDateFilter() {
        this.$refs.filterTable.clearFilter('date');
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },
    formatter(row, column) {
      return row.address;
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    filterHandler(value, row, column) {
      const property = column['property']
      return row[property] === value;
    },
    getJoinedActives () {
      let that = this
      token.request().then((res) => {
        active.getActives(that.nowPage, false, true, 100, function (res) {
          // console.log(res.data.data.records)
          if (res) {
            console.log(res)
            res.data.data.records.forEach(one => {
              one.beginTime = one.beginTime.split('T')[0]
              one.endTime = one.endTime.split('T')[0]
              that.tableData.push(one)
            })
            // statisticsFun ()
            // that.tableData.push(...(res.data.data.records))
            // console.log(that.tableData)
          }
        })
      })
    }
  },
  mounted () {
  },
  created () {
    this.getJoinedActives()    
  }
}
</script>

<style scoped>
  /* .actives{
    height: 100vh;
    width: 100vw;
    position: fixed;
    background-size: cover;
    color: #000;
    overflow: scroll;
  } */
  .actives {
    margin: 0 0 6vh 0;
  }
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 900px;
    color: #99a9bf;
    /* font-weight: 900; */
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  #refresh-data-btn {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 999;
  }
</style>